import UserSetting from './components/userSetting';
import { createBehavior, createResource } from '@inbiz/core';
import { TreeSelect } from './locale';

import {
  createInbizSchema,
  createBaseSchema,
  createValidatorSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createModelSchema,
  createSoureSchema,
  createComponentLayout,
  createControllerSchema
} from '@inbiz/setters';
import { InputNumber } from 'antd';

/**
 * 1.属性的默认值:defaultProps
 * 2.属性的json数据
 * */
export const defaultProps = {
  // isHide: false,
  multiple: false,
  // showLine: false,
  showIcon: false,
  placeholder: 'TreeSelect.pleaseSelect',
  // showLeafIcon: false,
  prefixCls: 'inbiz-TreeSelect',
  expandNode: false,
  panelHeight: undefined,
  config: {
    operations: [],
    IconsSettings: {
      config: [],
      type: 'normal',
    },
    fieldRelation: {
      id: '',
      parentId: '',
      label: '',
      rootId: '',
      selectedId: '',
    },
  },
  businessData: {},
};

export const SchemaTree = createInbizSchema({
  attribute: {
    ...createBaseSchema({
      placeholder: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'MultilingualInput',
      },
      showIcon: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      expandNode: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      multiple: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      // businessData: {
      //   type: 'object',
      //   'x-decorator': 'FormItem',
      //   'x-reactions': {
      //     dependencies: ['.multiple'],
      //     fulfill: {
      //       schema: {
      //         'x-visible': '{{$deps[0] === true}}',
      //       },
      //     },
      //   },
      //   'x-component': (props) => {
      //     // 表单内所有数据
      //     return <StorageSetting {...props} />;
      //   },
      // },
      // showLine: {
      //   type: 'boolean',
      //   'x-decorator': 'FormItem',
      //   'x-component': 'Switch'
      // },
      // showLeafIcon: {
      //   type: 'boolean',
      //   'x-decorator': 'FormItem',
      //   'x-component': 'Switch'
      // },
      config: {
        type: 'object',
        'x-decorator': 'FormItem',
        'x-component': (props) => {
          // 表单内所有数据
          return <UserSetting {...props} />;
        },
      },
    }),
    ...createValidatorSchema(false),
  },
  style: {
    ...createComponentStyleSchema({
      panelHeight: {
        type: 'number',
        'x-decorator': 'FormItem',
        'x-component': (props) => {
          return <InputNumber {...props} min={0} precision={0}></InputNumber>;
        },
      },
    }),
    ...createComponentLayout(),
    ...createDecoratorStyleSchema(),
  },
  senior: {
    ...createModelSchema({
      childModelConfig: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      storageConfig: {
        type: 'object',
        'x-decorator': 'FormItem',
        'x-component': 'StorageConfig',
        'x-component-props': {
          type: 'tree',
        },
        'x-reactions': {
          dependencies: ['.childModelConfig'],
          fulfill: {
            state: {
              visible: "{{$deps == 'true'}}",
            },
          },
        },
      },
    }),
    ...createSoureSchema({
      isApi: true,
      props: {
        resultKeys: ['rows'],
        isPrimaryKey: false,
      },
      fieldChange: (form) => {
        const config = form.query(/config$/).take();
        if (config['value']) {
          const IconsSettings = config?.['value']?.IconsSettings;
          config['value'] = {
            IconsSettings,
            fieldRelation: {
              id: '',
              label: '',
              parentId: '',
              rootId: '',
              selectedId: '',
            },
          };
        }
      },
    }),
  },
  controller: createControllerSchema({
    events: [{
      name: 'onSelect',
      label: '选中',
      platform: 'web'
    }, {
      name: 'onTreeExpand',
      label: '展开',
      platform: 'web'
    }, {
      name: 'onload',
      label: '加载',
      platform: 'web'
    }, {
      name: 'onError',
      label: '报错',
      platform: 'web'
    }, {
      name: 'onChange',
      label: '数据变更',
      platform: 'web'
    },{
      name: 'onRequest',
      label: '自定义请求',
      isConfigEvent: true,
      platform: 'web'
    },{
      name: 'onData',
      label: '格式化数据',
      isConfigEvent: true,
      platform: 'web'
    }, {
      name: 'onSuccess',
      label: '成功',
      platform: 'web'
    }]
  })
});

export const Behavior = createBehavior({
  extends: ['Field'],
  name: 'TreeSelect',
  selector: (node) => node.props?.['x-component'] === 'TreeSelect',
  designerLocales: TreeSelect,
  designerProps: { propsSchema: SchemaTree },
});

export const Resource = createResource({
  icon: 'DownListTree',
  elements: [
    {
      componentName: 'Field',
      props: {
        title: {
          status: true,
          value: 'TreeSelect.title',
        },
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'TreeSelect',
        'x-component-props': defaultProps,
      },
    },
  ],
});
